<template>
    <h3 style="text-align: center;">
        用户列表
    </h3>
    <table class="table table-bordered" border="1">
        <thead>
            <tr>
            <td>编号</td>
            <td>用户名</td>
            <td>角色权限</td>
            <td>密码</td>
            <td>状态</td>
            <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in Info" :key="item.P_Id">
                <td>{{item.P_Id}}</td>
            <td>{{item.P_Name}}</td>
            <td>{{item.P_Jwech}}</td>
            <td>{{item.P_Pwd}}</td>
            <td>{{item.P_State}}</td>
            <td>
                <button class="btn btn-primary" @click="Delett(item.P_Id)">删除</button>
            </td>
            </tr>
        </tbody>
    </table>
    <div>
        共计{{Fenye.listCount}}条数据
        每页{{Fenye.pageSize}}条
        当前为{{Fenye.pageIndex}}/{{Fenye.pageCount}}页
        <a href="#" @click="Tiaoz('A')" >首页</a>
        <a href="#" @click="Tiaoz('B')">上一页</a>
        <a href="#" @click="Tiaoz('C')">下一页</a>
        <a href="#" @click="Tiaoz('D')" >尾页</a>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
///显示
const Info = ref([{
    P_Id:0,
    P_Name:'',
    P_Pwd:'',
    P_Jwech:'',
    P_State:'',
}])
//分页条件
const Fenye = ref({
  pageIndex:1,
  pageSize:2,
  listCount:0,
  pageCount:0,
    
})
//分页方法
function Tiaoz(Try:string){
    switch(Try){
        case 'A':
            Fenye.value.pageIndex=1;
            break;
        case 'B':
            if(Fenye.value.pageIndex>1){
                Fenye.value.pageIndex--;
            }
            break;
        case 'C':
            if(Fenye.value.pageIndex<Fenye.value.pageCount)
            {
                Fenye.value.pageIndex++;
            }
            break;
        case 'D':
            Fenye.value.pageIndex=Fenye.value.pageCount;
            break;
    }
    ShowPeopleyh();
}
import axios from 'axios';
import { onMounted } from 'vue';
//钩子
onMounted(()=>{
  ShowPeopleyh();  
})
//显示
function ShowPeopleyh(){
  axios.get('https://localhost:44369/api/Peoples/ShowPeols',
  {
    params:{
      pageIndex:Fenye.value.pageIndex,
      pageSize:Fenye.value.pageSize,
    }
  })
  .then(res=>{
    Info.value=res.data.list;
    Fenye.value.listCount=res.data.listCount;
    Fenye.value.pageCount=res.data.pageCount;
  })
  .catch(err=>{
    console.log(err);
  })
}
///删除
function Delett(P_Id:number){

    if(confirm("是否删除")==true)
    {
axios.get('https://localhost:44369/api/Peoples/DeletePeople',{
    params:{
      P_Id:P_Id,
    }
  })
  .then(res=>{
    console.log(res.data);
    if(res.data>0)
    {
      alert("删除成功");
      ShowPeopleyh();
    }
    else{
      alert("删除失败");
    }
   
   
  })
  .catch(err=>{
    console.log(err);
  })
}
    }
  
</script>